<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语言选择器调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #0a0e1f 0%, #1a253d 50%, #243551 100%);
            color: white;
            min-height: 100vh;
        }
        .test-container {
            background: rgba(26, 37, 61, 0.8);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 245, 255, 0.2);
        }
        .language-selector {
            position: relative;
            display: inline-block;
        }
        .language-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 245, 255, 0.3);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .language-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .language-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(40, 40, 40, 0.95);
            border: 1px solid rgba(0, 245, 255, 0.3);
            border-radius: 8px;
            min-width: 150px;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        .language-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: white;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .language-option:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        .language-option.active {
            background: rgba(0, 245, 255, 0.2);
            color: #00f5ff;
        }
        .test-text {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            border-left: 3px solid #00f5ff;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .status.translating {
            background: rgba(0, 245, 255, 0.2);
            color: #00f5ff;
        }
        .status.success {
            background: rgba(0, 255, 0, 0.2);
            color: #00ff00;
        }
        .status.error {
            background: rgba(255, 0, 0, 0.2);
            color: #ff0000;
        }
        .hidden {
            display: none;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
    </style>
</head>
<body>
    <h1>🌐 语言选择器功能调试</h1>
    
    <div class="test-container">
        <h2>语言选择器</h2>
        <div class="language-selector">
            <button class="language-btn" onclick="toggleLanguageMenu()">
                <span id="currentFlag">🇨🇳</span>
                <span id="currentLangName">中文</span>
                <span>▼</span>
            </button>
            <div id="languageMenu" class="language-menu hidden">
                <div class="language-option active" onclick="selectLanguage('zh', '🇨🇳', '中文')">
                    <span>🇨🇳</span>
                    <span>中文</span>
                </div>
                <div class="language-option" onclick="selectLanguage('en', '🇺🇸', 'English')">
                    <span>🇺🇸</span>
                    <span>English</span>
                </div>
                <div class="language-option" onclick="selectLanguage('pt', '🇵🇹', 'Português')">
                    <span>🇵🇹</span>
                    <span>Português</span>
                </div>
            </div>
        </div>
        <div id="overlay" class="overlay hidden" onclick="closeLanguageMenu()"></div>
    </div>

    <div class="test-container">
        <h2>翻译状态</h2>
        <div id="status" class="status">准备就绪</div>
        <div>当前语言: <span id="currentLanguage">中文 (zh)</span></div>
    </div>

    <div class="test-container">
        <h2>测试文本</h2>
        <div class="test-text" data-original="跨境政策咨询平台">跨境政策咨询平台</div>
        <div class="test-text" data-original="全球政策概览">全球政策概览</div>
        <div class="test-text" data-original="智能咨询">智能咨询</div>
        <div class="test-text" data-original="政策查询">政策查询</div>
        <div class="test-text" data-original="政策分析">政策分析</div>
        <div class="test-text" data-original="欢迎回来">欢迎回来</div>
        <div class="test-text" data-original="今天是美好的一天，让我们开始工作吧！">今天是美好的一天，让我们开始工作吧！</div>
    </div>

    <div class="test-container">
        <h2>翻译测试</h2>
        <button onclick="testTranslation()">测试翻译功能</button>
        <button onclick="resetTexts()">重置文本</button>
        <div id="translationResults"></div>
    </div>

    <script>
        let currentLanguage = 'zh';
        let isTranslating = false;
        
        const languages = {
            'zh': { flag: '🇨🇳', name: '中文' },
            'en': { flag: '🇺🇸', name: 'English' },
            'pt': { flag: '🇵🇹', name: 'Português' }
        };

        function toggleLanguageMenu() {
            const menu = document.getElementById('languageMenu');
            const overlay = document.getElementById('overlay');
            
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
                overlay.classList.remove('hidden');
            } else {
                closeLanguageMenu();
            }
        }

        function closeLanguageMenu() {
            document.getElementById('languageMenu').classList.add('hidden');
            document.getElementById('overlay').classList.add('hidden');
        }

        function selectLanguage(langCode, flag, name) {
            console.log(`选择语言: ${langCode}`);
            
            // 更新当前语言显示
            document.getElementById('currentFlag').textContent = flag;
            document.getElementById('currentLangName').textContent = name;
            document.getElementById('currentLanguage').textContent = `${name} (${langCode})`;
            
            // 更新活动状态
            document.querySelectorAll('.language-option').forEach(option => {
                option.classList.remove('active');
            });
            event.target.closest('.language-option').classList.add('active');
            
            // 关闭菜单
            closeLanguageMenu();
            
            // 如果语言发生变化，开始翻译
            if (currentLanguage !== langCode) {
                currentLanguage = langCode;
                updateStatus('translating', `正在切换到${name}...`);
                
                setTimeout(() => {
                    translateAllTexts(langCode);
                }, 500);
            }
        }

        function updateStatus(type, message) {
            const statusEl = document.getElementById('status');
            statusEl.className = `status ${type}`;
            statusEl.textContent = message;
        }

        async function translateAllTexts(targetLang) {
            if (targetLang === 'zh') {
                resetTexts();
                updateStatus('success', '已切换到中文');
                return;
            }

            updateStatus('translating', '正在翻译...');
            isTranslating = true;

            const textElements = document.querySelectorAll('.test-text');
            let successCount = 0;
            let errorCount = 0;

            for (const element of textElements) {
                const originalText = element.getAttribute('data-original');
                try {
                    const translated = await translateText(originalText, targetLang);
                    element.textContent = translated;
                    successCount++;
                } catch (error) {
                    console.error('翻译失败:', originalText, error);
                    errorCount++;
                }
            }

            isTranslating = false;
            
            if (errorCount === 0) {
                updateStatus('success', `翻译完成 (${successCount}/${textElements.length})`);
            } else {
                updateStatus('error', `翻译完成，但有 ${errorCount} 个失败`);
            }
        }

        async function translateText(text, targetLang) {
            // 模拟翻译API调用
            const appId = '20250627002391301';
            const appKey = 'ZPM1rdKh_etnWFatwYR0';
            const salt = Date.now().toString();
            const from = 'zh';
            const to = targetLang;
            
            // 生成简单签名（实际项目中应该使用crypto-js）
            const sign = btoa(appId + text + salt + appKey).replace(/[^a-zA-Z0-9]/g, '').substring(0, 32);
            
            try {
                const url = `https://fanyi-api.baidu.com/api/trans/vip/translate?q=${encodeURIComponent(text)}&from=${from}&to=${to}&appid=${appId}&salt=${salt}&sign=${sign}`;
                
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.trans_result && data.trans_result.length > 0) {
                    return data.trans_result[0].dst;
                }
                
                throw new Error('翻译API返回异常: ' + (data.error_msg || JSON.stringify(data)));
            } catch (error) {
                console.error('翻译请求失败:', error);
                // 返回原文作为后备
                return text;
            }
        }

        function resetTexts() {
            document.querySelectorAll('.test-text').forEach(element => {
                element.textContent = element.getAttribute('data-original');
            });
            updateStatus('success', '已重置为原始文本');
        }

        async function testTranslation() {
            updateStatus('translating', '测试翻译功能...');
            
            const testText = '这是一个测试文本';
            const resultsDiv = document.getElementById('translationResults');
            
            try {
                const enResult = await translateText(testText, 'en');
                const ptResult = await translateText(testText, 'pt');
                
                resultsDiv.innerHTML = `
                    <div style="margin-top: 10px;">
                        <div><strong>原文:</strong> ${testText}</div>
                        <div><strong>英文:</strong> ${enResult}</div>
                        <div><strong>葡萄牙语:</strong> ${ptResult}</div>
                    </div>
                `;
                
                updateStatus('success', '翻译测试完成');
            } catch (error) {
                resultsDiv.innerHTML = `<div style="color: red;">测试失败: ${error.message}</div>`;
                updateStatus('error', '翻译测试失败');
            }
        }

        // 页面加载完成后初始化
        window.onload = () => {
            console.log('语言选择器调试页面加载完成');
            updateStatus('success', '页面加载完成，可以开始测试');
        };
    </script>
</body>
</html> 